// 页面通用样式

//示例文档表格
.docTable{
	.th,
	.tr{
		display: flex;
		align-items: center;
		padding: $vi-space-sm;
		&.extra{
			flex-wrap: wrap;
		}
		.body{
			display: flex;
			align-items: center;
			width: 100% !important;
		}
		>view,
		.body >view{
			&:first-child{
				flex-shrink: 0;
				word-break: break-all;
				width: 5em;
			}
			&:nth-child(2){
				flex-shrink: 0;
				text-align: center;
				width: 6em;
			}
			&:nth-child(3){
				flex-shrink: 0;
				text-align: center;
				width: 5em;
			}
			&:last-child{
				flex-grow: 1;
				padding-left: 0.25em;
			}
		}
		.appendix{
			width: 100% !important;
			text-align: left !important;
			box-sizing: border-box;
			padding-left: 10% !important;
			margin-top: 0.5em;
		}
	}
	.th{
		background-color: $vi-bgColor-contrast;
	}
	.tr:nth-child(odd){
		background-color: $vi-bgColor-info;
	}
}
.docSubTable{
	.th,
	.tr{
		display: flex;
		align-items: center;
		padding: $vi-space-sm;
		&.extra{
			flex-wrap: wrap;
		}
		.body{
			display: flex;
			align-items: center;
			width: 100% !important;
		}
		>view,
		.body >view{
			&:first-child{
				flex-shrink: 0;
				word-break: break-all;
				width: 6em;
			}
			&:nth-child(2){
				flex-shrink: 0;
				text-align: center;
				width: 6em;
			}
			&:last-child{
				flex-grow: 1;
				padding-left: 0.25em;
			}
		}
		.appendix{
			width: 100% !important;
			text-align: left !important;
			box-sizing: border-box;
			padding-left: 10% !important;
			margin-top: 0.5em;
		}
	}
	.tr:nth-child(odd){
		background-color: $vi-bgColor-warning;
	}
}
.pageSize-md{
	.docTable{
		.th, .tr{
			>view,
			.body >view{
				&:first-child{ width: 10em; }
				&:nth-child(2){ width: 8em; }
				&:nth-child(3){ width: 8em;}
			}
		}
	}
	.docSubTable{
		.th, .tr{
			>view,
			.body >view{
				&:first-child{ width: 10em; }
				&:nth-child(2){ width: 8em; }
			}
		}
	}
}
.pageSize-lg{
	.docTable{
		.th, .tr{
			>view,
			.body >view{
				&:first-child{ width: 15em; }
				&:nth-child(2){ width: 10em; }
				&:nth-child(3){ width: 10em;}
			}
		}
	}
	.docSubTable{
		.th, .tr{
			>view,
			.body >view{
				&:first-child{ width: 15em; }
				&:nth-child(2){ width: 10em; }
			}
		}
	}
}
